<template>
  <customizeDialog
    title="历史版本"
    :visible="visible"
    width="800px"
    top="40px"
    @update:visible="visible = $event"
  >
    <div class="table-wrap">
      <!-- <div class="search_header">
        <div></div>
        <div class="search_header_right">
          <el-input
            placeholder="请输入项目名称、项目编号、建设单位、施工单位"
            v-model="parameter.keywords"
            @keydown.enter.native="search"
            clearable
          >
            <span
              @click="search"
              slot="suffix"
              style="display: inline-block"
            >
              <Icon
                title="搜索"
                name="sousuo"
                color="#A7ADB5"
                font-size="20"
              />
            </span>
          </el-input>
        </div>
      </div>-->
      <el-table
        :data="projectList"
        :header-cell-style="{
          background: '#F2F6FB ',
          color: ' #6B767D'
        }"
        :row-class-name="tableRowClassName"
        v-loading="loading"
        @selection-change="handleSelectionChange"
      >
        <!-- <el-table-column
          type="selection"
          width="55"
        ></el-table-column>-->
        <el-table-column
          label="更新批次"
          prop="batch"
          show-overflow-tooltip
        >
          <template slot-scope="scope"
            >{{ scope.row.batch
            }}{{ scope.row.type }}</template
          >
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="updateTime"
          show-overflow-tooltip
        />
        <el-table-column
          label="更新结果"
          prop="result"
          show-overflow-tooltip
        />
      </el-table>
      <div class="table-pagination" v-if="total">
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="parameter.pageSize"
          @current-change="pageChange"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </customizeDialog>
</template>

<script>
import { queryHistoryList } from '@/api/keyProjectManagement'
import customizeDialog from '@/components/checkHistory/customizeDialog'
import Icon from '@/components/icon'
export default {
  name: 'prtrolProjectAdd',
  components: { Icon, customizeDialog },
  data() {
    return {
      loading: false,
      visible: false,
      projectList: [],
      total: 0,
      parameter: {
        keywords: '',
        pageIndex: 1,
        pageSize: 8
      },
      selectRow: []
    }
  },
  async created() {},
  methods: {
    show(pkid) {
      this.visible = true
      this.parameter.pageIndex = 1
      this.parameter.refId = pkid
      this.getList()
    },
    search() {
      this.parameter.pageIndex = 1
      this.getList()
    },
    pageChange(page) {
      this.parameter.pageIndex = page
      this.getList()
    },
    getList() {
      this.loading = true
      queryHistoryList(this.parameter).then((res) => {
        if (res.success && res.data) {
          this.total = res.data.count
          this.projectList = res.data.list
        }
        this.loading = false
      })
    },
    // 表格高亮
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'light'
      } else {
        return ''
      }
    },
    handleSelectionChange(value) {
      this.selectRow = value
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/table.scss';
.table-wrap {
  width: 100%;
  height: 500px;
  padding: 0;
}
.cancel {
  width: 80px;
  height: 34px;
  border: 1px solid #497fa3;
  font-size: 14px;
  font-weight: 400;
  color: #497fa3;
}
.sumbit {
  width: 80px;
  height: 34px;
  background: #497fa3;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
</style>
